<template>
  <div class="page">
    <!-- 左侧：新增反馈 -->
    <div class="left-panel">
      <el-card class="feedback-form-card">
        <template #header>
          <div class="card-header">新增反馈</div>
        </template>
        <el-form :model="feedbackForm" label-width="80px" ref="feedbackFormRef">
          <el-form-item label="主题" prop="subject" :rules="[{ required: true, message: '请输入主题' }]">
            <el-input v-model="feedbackForm.subject" placeholder="请输入反馈主题" />
          </el-form-item>
          <el-form-item label="内容" prop="content" :rules="[{ required: true, message: '请输入内容' }]">
            <el-input
                type="textarea"
                v-model="feedbackForm.content"
                placeholder="请输入反馈内容"
                rows="5"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitFeedback" :loading="submitting">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 右侧：反馈列表 -->
    <div class="right-panel">
      <el-card class="feedback-list-card">
        <template #header>
          <div class="card-header">
            <span>我的反馈</span>
            <el-button type="primary" @click="fetchFeedbackList">刷新</el-button>
          </div>
        </template>
        <div class="feedback-list">
          <el-card
              v-for="feedback in feedbackList"
              :key="feedback.id"
              class="feedback-card"
              shadow="hover"
          >
            <div class="feedback-item">
              <div class="subject">{{ feedback.subject }}</div>
              <div class="content">{{ feedback.content }}</div>
              <div class="status">
                <el-tag :type="feedback.status ? 'success' : 'warning'">
                  {{ feedback.status ? '已受理' : '正在受理' }}
                </el-tag>
              </div>
              <div class="created-at">{{ formatDate(feedback.created_at) }}</div>
            </div>
          </el-card>
          <el-empty v-if="feedbackList.length === 0" description="暂无反馈记录" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

// 反馈列表数据
const feedbackList = ref([]);
// 反馈表单数据
const feedbackForm = ref({
  subject: '',
  content: ''
});
// 提交状态
const submitting = ref(false);
// 表单引用
const feedbackFormRef = ref(null);

// 获取反馈列表
const fetchFeedbackList = async () => {
  try {
    const response = await axios.get('/api/feedback/user-list',{
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
      },
    });
    feedbackList.value = response.data.data;
  } catch (error) {
    ElMessage.error('获取反馈列表失败');
    console.error(error);
  }
};

// 提交反馈
const submitFeedback = async () => {
  try {
    await feedbackFormRef.value.validate();
    submitting.value = true;
    const response = await axios.post('/api/feedback/add', feedbackForm.value,{
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
      },
    });
    ElMessage.success(response.data.message);
    feedbackForm.value = { subject: '', content: '' }; // 重置表单
    fetchFeedbackList(); // 刷新列表
  } catch (error) {
    ElMessage.error('提交反馈失败');
    console.error(error);
  } finally {
    submitting.value = false;
  }
};

function formatDate(timestamp) {
  const date = new Date(timestamp);
  date.setHours(date.getHours() + 8); // 直接增加8小时
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
}

// 示例
console.log(formatDate(Date.now())); // 当前时间加8小时后的格式化结果

// 示例
console.log(formatDate(Date.now())); // 当前时间加8小时后的格式化结果
// 页面加载时获取反馈列表
onMounted(() => {
  fetchFeedbackList();
});
</script>

<style scoped>
.page {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #409EFF 0%, #36D1DC 100%);
}

.left-panel,
.right-panel {
  width: 45%;
  margin: 0 20px;
}

.feedback-form-card,
.feedback-list-card {
  height: 100%;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feedback-list {
  max-height: 500px;
  overflow-y: auto;
}

.feedback-card {
  margin-bottom: 10px;
}

.feedback-item {
  display: flex;
  flex-direction: column;
}

.subject {
  font-weight: bold;
  margin-bottom: 5px;
}

.content {
  margin-bottom: 10px;
}

.status {
  margin-bottom: 5px;
}

.created-at {
  font-size: 12px;
  color: #999;
}
</style>